<template>
    <p>姓名：{{ name }}</p>
    <p>年龄：{{ age }}</p>
    <p> {{ computedAge }} </p>
    <p> {{ modelValue }} </p>
    <ul>
        <li v-for="i in arr" :key="i">{{ i }}</li>
    </ul>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="arrAdd">+1</button>
    <button @click="parentAdd">父组件值增加</button>

</template>

<script setup>
    import { ref, reactive, computed, watch, onMounted, onBeforeMount, onBeforeUpdate, onUpdated } from 'vue'
    let arr = reactive([1, 2, 3])
    let name = ref('张三')
    let age = ref(25)

    function changeName() {
        name.value = '李四'
    }
    function changeAge() {
        age.value = 26
    }
    function arrAdd() {
        arr.push(arr.length + 1)
    }

    const props = defineProps({
        modelValue: {
            type: Number,
            default: 0
        }
    })
    const emit = defineEmits('update:modelValue')
    function parentAdd() {
        emit('update:modelValue', props.modelValue + 1)
    }


    const computedAge = computed(() => {
        return age.value = 27
    })

    watch(arr, (newVal) => {
        if (newVal.length > 5) {
            console.log(newVal)
            console.log('数组长度大于5')
            arr.splice(0, 5)
            arr.splice(0, 1, 1)
        }
    })

    onMounted(() => {
        console.log('mounted', name.value, age.value)
    })

    onBeforeMount(() => {
        console.log('beforeMount', name.value, age.value)
    })

    onBeforeUpdate(() => {
        console.log('beforeUpdate', name.value, age.value)
    })

    onUpdated(() => {
        console.log('updated', name.value, age.value)    
    })


</script>